<template>
  <view class="card-content">
    <view class="header">
       <view class="h-c">
        <image  class="logo"
            :src="dyPlaying.image"
            mode="widthFix"></image>
        <view class="title-content">
            <view class="title"> {{dyPlaying.name}}</view>
            <view class="bq">
              <view>
                cps
              </view>
              <view>
                cps
              </view>
            </view>
        </view>
       </view>
        <view class="commit"> 上传作品</view>
    </view>

    <view class="body">
        {{dyPlaying.content}}
    </view>

    <view class="commission">
      <view>
          广告分佣 | <text>{{dyPlaying.advertisementDivide * 100}}%</text>
      </view>

      <view>
        广告分佣 | <text>{{dyPlaying.paymentDivide* 100}}%</text>
      </view>

      <view class="get-data">
        收益数据
      </view>

    </view>
    <view class="bottom">
      <view>推广教程</view>
      <view>我要教程</view>
    </view>


  </view>
</template>

<script setup lang="ts">
import type{ DyPlaying  } from "@/api/model/dyUserCodeModel";

interface IProps {
  dyPlaying:DyPlaying
}

withDefaults(defineProps<IProps>(), {})

</script>

<style lang="scss" scoped>
.card-content{
    margin: 20rpx;
    border-radius: 10rpx;
    width: 500rpx;
    background: rgb(248,247,252);
    height: auto;
    padding: 10rpx 0;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo{
        width: 80rpx;
        border-radius: 20rpx;
        margin: 10rpx;
      }
      .h-c{
        display: flex;
        align-items: center;
      }
      .title-content{
        margin-left: 10rpx;
        .title{
          font-size: 25rpx;
          font-weight: bolder;
          
        }
        .bq{
          display: flex;
          font-size: 20rpx;
          margin-top: 5rpx;
          view{
            padding:0 10rpx;
            background: rgb(232, 229, 247);
            border-radius: 10%;
            margin-right: 10rpx;
            height: 30rpx;
          }
        }
      }
      .commit{
        background: rgb(99, 79, 214);
        padding: 10rpx 4%;
        font-size: 25rpx;
        color: white;
        border-radius: 10rpx;
        margin-right: 18rpx;
      }
    }
    .body{
      font-size: 24rpx;
      padding: 10rpx;
      color: #919191;
    }
    .commission{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22rpx;
      background: rgb(251,251,253);
      view{
        padding:  13rpx;
        font-weight: bold;
        text{
              color: rgb(116,98,198);
            }
      }
      .get-data{
        background: rgb(242,240,254);
        border-radius: 40rpx 0 0 0;
        color: rgb(96,87,139);
      }
    }
    .bottom{
      display: flex;
      justify-content: space-between;
      padding: 0 50rpx;
      font-size: 25rpx;
      align-items: center;
      color: rgb(111,90,216);
      background: rgb(242,240,254);
    }
}
</style>
